<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="//res.layui.com/layui/build/css/layui.css" media="all">
    <link rel="stylesheet" href="http://res.layui.com/css/global.css" media="all">
</head>
<body>

<div class="layui-layout layui-layout-admin">
    <div class="layui-header header header-demo">
        <div class="layui-main">
            <a class="logo" href="/">
                <img src="//res.layui.com/images/layui/logo-1.png" alt="layui">
            </a>
            <ul class="layui-nav">
                <li class="layui-nav-item ">
                    <a href="/doc/">文档</a>
                </li>
                <li class="layui-nav-item layui-this">
                    <a href="/demo/">演示</a>
                </li>

                <li class="layui-nav-item">
                    <a href="http://fly.layui.com/" target="_blank">社区</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">

            <ul class="layui-nav layui-nav-tree site-demo-nav">

                <li class="layui-nav-item layui-nav-itemed">
                    <a class="javascript:;" href="javascript:;">开发工具</a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="/demo/">调试预览</a>
                        </dd>
                    </dl>
                </li>

                <li class="layui-nav-item layui-nav-itemed">
                    <a class="javascript:;" href="javascript:;">基本元素</a>
                    <dl class="layui-nav-child">
                        <dd class="">
                            <a href="/demo/button.html">按钮</a>
                        </dd>
                        <dd class="">
                            <a href="/demo/form.html">表单</a>
                        </dd>
                        <dd class="layui-this">
                            <a href="/demo/nav.html">导航</a>
                        </dd>
                        <dd class="">
                            <a href="/demo/table.html">表格</a>
                        </dd>
                        <dd class="">
                            <a href="/demo/tab.html">选项卡</a>
                        </dd>
                        <dd class="">
                            <a href="/demo/auxiliar.html">辅助元素</a>
                        </dd>
                    </dl>
                </li>

                <li class="layui-nav-item layui-nav-itemed">
                    <a class="javascript:;" href="javascript:;">官方组件</a>
                    <dl class="layui-nav-child">
                        <dd class="">
                            <a href="/demo/layer.html">
                                <i class="layui-icon" style="top: 3px;">&#xe638;</i><cite>弹出层</cite>
                            </a>
                        </dd>
                        <dd class="">
                            <a href="/demo/layim.html">
                                <i class="layui-icon" style="position: relative; top: 3px;">&#xe63a;</i>
                                <cite>即时通讯</cite>
                            </a>
                        </dd>
                        <dd class="">
                            <a href="/demo/laydate.html">
                                <i class="layui-icon" style="top: 1px;">&#xe637;</i><cite>日期时间选择</cite>
                            </a>
                        </dd>
                        <dd class="">
                            <a href="/demo/laypage.html">
                                <i class="layui-icon">&#xe633;</i><cite>多功能分页</cite>
                            </a>
                        </dd>
                        <dd class="">
                            <a href="/demo/laytpl.html">
                                <i class="layui-icon">&#xe628;</i><cite>模板引擎</cite>
                            </a>
                        </dd>
                        <dd class="">
                            <a href="/demo/layedit.html">
                                <i class="layui-icon">&#xe639;</i>
                                <cite>富文本编辑器</cite>
                            </a>
                        </dd>
                        <dd class="">
                            <a href="/demo/upload.html">
                                <i class="layui-icon">&#xe62f;</i>
                                <cite>文件上传</cite>
                            </a>
                        </dd>
                        <dd class="">
                            <a href="/demo/tree.html">
                                <i class="layui-icon">&#xe62e;</i>
                                <cite>树形菜单</cite>
                            </a>
                        </dd>
                        <dd class="">
                            <a href="/demo/util.html">
                                <i class="layui-icon">&#xe631;</i>
                                <cite>工具块</cite>
                            </a>
                        </dd>
                        <dd class="">
                            <a href="/demo/flow.html">
                                <i class="layui-icon">&#xe636;</i>
                                <cite>流加载</cite>
                            </a>
                        </dd>
                        <dd class="">
                            <a href="/demo/code.html">
                                <i class="layui-icon" style="top: 1px;">&#xe635;</i>
                                <cite>代码修饰器</cite>
                            </a>
                        </dd>
                    </dl>
                </li>

                <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
            </ul>

        </div>
    </div>
</div>
<script src="//res.layui.com/layui/build/layui.js" charset="utf-8"></script>
<script>
    layui.use('element', function () {
        var element = layui.element(); //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function (elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
</script>

</body>
</html></body>